{% import "public/upload-image.njk" as upload_image %}
{% set avatar_url = ROOT + "manage/user/info/avatar/" + user.username %}
<div class="Layout-sidebar">
    <div class="mb-2 col-6 col-sm-12 mx-auto">
        <div class="position-relative">
            {{ upload_image.img(avatar_url, "260", "260", "upload-avatar-blob", "upload-avatar-click") }}
            <button id="edit-profile-avatar" class="btn position-absolute mr-2 mb-4 bottom-0 btn-sm color-bg-default d-none" type="button">
                <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
                <span>Edit</span>
            </button>
        </div>
        <h1 class="f3-light">{{ info.nickname }}</h1>
    </div>
    <div class="p-2">
        <div id="profile-list" class="width-full">
            <h1 class="f3-light mb-2">{{ info.bio }}</h1>
            {% if user.session %}
            <button id="edit-profile-switch" class="btn btn-block mb-2" type="button">
                Edit profile
            </button>
            {% endif %}
            <div class="d-flex mt-3">
                <div class="flex-0 mr-2">
                    <svg style="width: 16px" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"
                        data-view-component="true" class="octicon octicon-organization">
                        <path fill-rule="evenodd"
                            d="M1.5 14.25c0 .138.112.25.25.25H4v-1.25a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v1.25h2.25a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25v12.5zM1.75 16A1.75 1.75 0 010 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 00.25-.25V8.285a.25.25 0 00-.111-.208l-1.055-.703a.75.75 0 11.832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0114.25 16h-3.5a.75.75 0 01-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 01-.75-.75V14h-1v1.25a.75.75 0 01-.75.75h-3zM3 3.75A.75.75 0 013.75 3h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 3.75zM3.75 6a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM3 9.75A.75.75 0 013.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 9.75zM7.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 6.75A.75.75 0 017.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 6.75zM7.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z">
                        </path>
                    </svg>
                </div>
                <span>{{ info.school }}</span>
            </div>
            <div class="d-flex mt-3">
                <div class="flex-0 mr-2">
                    <svg style="width: 16px" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"
                        data-view-component="true" class="octicon octicon-location">
                        <path fill-rule="evenodd"
                            d="M11.536 3.464a5 5 0 010 7.072L8 14.07l-3.536-3.535a5 5 0 117.072-7.072v.001zm1.06 8.132a6.5 6.5 0 10-9.192 0l3.535 3.536a1.5 1.5 0 002.122 0l3.535-3.536zM8 9a2 2 0 100-4 2 2 0 000 4z">
                        </path>
                    </svg>
                </div>
                <span>{{ info.address }}</span>
            </div>
            <div class="d-flex mt-3">
                <div class="flex-0 mr-2">
                    <svg style="width: 16px" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"
                        data-view-component="true" class="octicon octicon-link">
                        <path fill-rule="evenodd"
                            d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z">
                        </path>
                    </svg>
                </div>
                <span><a class="Link--primary" target="_blank" href="{{ info.link }}">{{ info.link }}</a></span>
            </div>
            <div class="d-flex mt-3">
                <div class="flex-0 mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.5 222.3" height="16" width="16">
                        <title>Twitter</title>
                        <path
                            d="M273.5 26.3a109.77 109.77 0 0 1-32.2 8.8 56.07 56.07 0 0 0 24.7-31 113.39 113.39 0 0 1-35.7 13.6 56.1 56.1 0 0 0-97 38.4 54 54 0 0 0 1.5 12.8A159.68 159.68 0 0 1 19.1 10.3a56.12 56.12 0 0 0 17.4 74.9 56.06 56.06 0 0 1-25.4-7v.7a56.11 56.11 0 0 0 45 55 55.65 55.65 0 0 1-14.8 2 62.39 62.39 0 0 1-10.6-1 56.24 56.24 0 0 0 52.4 39 112.87 112.87 0 0 1-69.7 24 119 119 0 0 1-13.4-.8 158.83 158.83 0 0 0 86 25.2c103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3a114.25 114.25 0 0 0 28.1-29.1"
                            fill="currentColor"></path>
                    </svg>
                </div>
                <span>{{ info.twitter }}</span>
            </div>
        </div>
        <form id="edit-profile-form" class="width-full d-none">
            <label for="name">name</label>
            <input name="nickname" value="{{ info.nickname }}" class="form-control color-bg-default width-full" type="text" placeholder="name" id="name" />
            <label class="width-full d-block mb-1" for="bio">Bio</label>
            <textarea name="bio" rows="3" maxlength="160" class="form-control color-bg-default width-full" id="bio"></textarea>
            <script>
                $('textarea[name="bio"]').val("{{ info.bio }}")
            </script>
            <div class="mt-3 d-flex flex-items-center">
                <div class="flex-0 mr-2">
                    <svg style="width: 16px" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"
                        data-view-component="true" class="octicon octicon-organization">
                        <path fill-rule="evenodd"
                            d="M1.5 14.25c0 .138.112.25.25.25H4v-1.25a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v1.25h2.25a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25v12.5zM1.75 16A1.75 1.75 0 010 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 00.25-.25V8.285a.25.25 0 00-.111-.208l-1.055-.703a.75.75 0 11.832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0114.25 16h-3.5a.75.75 0 01-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 01-.75-.75V14h-1v1.25a.75.75 0 01-.75.75h-3zM3 3.75A.75.75 0 013.75 3h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 3.75zM3.75 6a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM3 9.75A.75.75 0 013.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 9.75zM7.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 6.75A.75.75 0 017.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 6.75zM7.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z">
                        </path>
                    </svg>
                </div>
                <input name="school" value="{{ info.school }}" class="input-sm width-full form-control color-bg-default" type="text" placeholder="学校"
                    id="school" />
            </div>
            <div class="mt-2 d-flex flex-items-center">
                <div class="flex-0 mr-2">
                    <svg style="width: 16px" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"
                        data-view-component="true" class="octicon octicon-location">
                        <path fill-rule="evenodd"
                            d="M11.536 3.464a5 5 0 010 7.072L8 14.07l-3.536-3.535a5 5 0 117.072-7.072v.001zm1.06 8.132a6.5 6.5 0 10-9.192 0l3.535 3.536a1.5 1.5 0 002.122 0l3.535-3.536zM8 9a2 2 0 100-4 2 2 0 000 4z">
                        </path>
                    </svg>
                </div>
                <input name="address" value="{{ info.address }}" class="input-sm width-full form-control color-bg-default" type="text" placeholder="地址"
                    id="address" />
            </div>
            <div class="mt-2 d-flex flex-items-center">
                <div class="flex-0 mr-2">
                    <svg style="width: 16px" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"
                        data-view-component="true" class="octicon octicon-link">
                        <path fill-rule="evenodd"
                            d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z">
                        </path>
                    </svg>
                </div>
                <input name="link" value="{{ info.link }}" class="input-sm width-full form-control color-bg-default" type="text" placeholder="link"
                    id="link" />
            </div>
            <div class="mt-2 d-flex flex-items-center">
                <div class="flex-0 mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.5 222.3" height="16" width="16">
                        <title>Twitter</title>
                        <path
                            d="M273.5 26.3a109.77 109.77 0 0 1-32.2 8.8 56.07 56.07 0 0 0 24.7-31 113.39 113.39 0 0 1-35.7 13.6 56.1 56.1 0 0 0-97 38.4 54 54 0 0 0 1.5 12.8A159.68 159.68 0 0 1 19.1 10.3a56.12 56.12 0 0 0 17.4 74.9 56.06 56.06 0 0 1-25.4-7v.7a56.11 56.11 0 0 0 45 55 55.65 55.65 0 0 1-14.8 2 62.39 62.39 0 0 1-10.6-1 56.24 56.24 0 0 0 52.4 39 112.87 112.87 0 0 1-69.7 24 119 119 0 0 1-13.4-.8 158.83 158.83 0 0 0 86 25.2c103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3a114.25 114.25 0 0 0 28.1-29.1"
                            fill="currentColor"></path>
                    </svg>
                </div>
                <input name="twitter" value="{{ info.twitter }}" class="input-sm width-full form-control color-bg-default" type="text"
                    placeholder="Twitter:username" id="twitter" />
            </div>
            <div class="mt-3">
                <button id="edit-profile-form-submit" class="btn btn-sm btn-primary d-inline-block mr-2" type="button">
                    Save
                </button>
                <button id="edit-profile-form-cancel" class="btn btn-sm d-inline-block" type="button">
                    Cancel
                </button>
            </div>
        </form>
    </div>
    <script>
        function switchEditProfileForm() {
            $("#profile-list").toggleClass("d-none");
            $("#edit-profile-form").toggleClass("d-none");
            $('#edit-profile-avatar').toggleClass("d-none")
        }
        $("#edit-profile-switch").on("click", function () {
            switchEditProfileForm();
        });
        $("#edit-profile-form-submit").on("click", function () {
            var formData = new FormData($('#edit-profile-form')[0])
            if (upload_avatar_image) {
                formData.append('avatar', upload_avatar_image)
            }
            $.ajax({
                url: '{{ROOT}}manage/user/profile',
                method: 'PUT',
                processData: false,
                contentType: false,
                data: formData,
                success(res) {
                    if (res.code === 20000) {
                        window.location = window.location
                    }
                },
            })
            
        });
        $("#edit-profile-form-cancel").on("click", function () {
            switchEditProfileForm();
        });
        $('#edit-profile-avatar').on('click', function() {
            var event = new Event('upload-avatar-click')
            window.dispatchEvent(event)
        })
        var upload_avatar_image = null
        window.addEventListener('upload-avatar-blob', function(e) {
            var blob = e.detail.blob
            upload_avatar_image = blob
        })
    </script>
</div>